<!doctype html>
<html>
<head>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <title>乐豆互动-弹幕大屏幕</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("static/background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            font-size: 1em;
        }

        /*d_screen start*/
        .dm {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .dm .d_screen .d_del {
            width: 38px;
            height: 38px;
            background: #600;
            display: block;
            text-align: center;
            line-height: 38px;
            text-decoration: none;
            font-size: 20px;
            color: #fff;
            border-radius: 19px;
            border: 1px solid #fff;
            position: absolute;
            top: 10px;
            right: 20px;
            z-index: 3;
            display: none;
        }

        .dm .d_screen .d_del:hover {
            background: #f00;
        }

        .dm .d_screen .d_mask {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.2;
            z-index: 0;
        }

        .dm .d_screen .d_show {
            position: relative;
            z-index: 2;
        }

        .dm .d_screen .d_show div {
            font-size: 22px;
            line-height: 36px;
            font-weight: 500;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }

        /*end d_scree*/

        /*.send start*/
        .send {
            width: 100%;
            height: 76px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .send .s_fiter {
            width: 100%;
            height: 76px;
            background: #000;
            left: 0;
            opacity: 0.8;
        }

        .send .s_con {
            width: 100%;
            height: 76px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            text-align: center;
            line-height: 76px;
        }

        .send .s_con
        .s_txt {
            width: 605px;
            height: 36px;
            border-radius: 4px 0 0 4px;
            outline: none;
            border: 1px solid #5bba32;
        }

        .send .s_con .s_sub {
            width: 100px;
            height: 37px;
            background: #65c33d;
            border: 0;
            outline: none;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
            border: 1px solid #5bba32;
        }

        .send .s_con .s_sub:hover {
            background: #3eaf0e;
        }

        #online-count {
            color: #fff;
            z-index: 1000;
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 2em;

        }

        .message {
            overflow: hidden;
            height: 50px;
            padding: 10px 50px;
            background-color: #fff;
            border-radius: 40px;
            box-shadow: 2px 2px 5px #222;
            min-width:100px;
        }

        .message img {
            width: 50px;
            line-height: 50px;
            display: inline-block;
            border-radius: 50%;
        }

        .message .content {
            height: 50px;
            line-height: 50px;
            color: #fff;
            position: absolute;
        }

        /*end .send*/
    </style>
</head>
<body>
<div id="online-count">

</div>
<!--dm start-->
<div class="dm">
    <!--d_screen start-->
    <div class="d_screen">
        <div class="d_mask"></div>
        <div class="d_show">
        </div>
    </div>
    <!--end d_screen-->

    <!--send start-->
    <div class="send">
        <div class="s_fiter">
            <div class="s_con">
                <input type="text" class="s_txt" id="content"/>
                <input type="button" value="发送" class="s_sub"/>
            </div>
        </div>
    </div>
    <!--end send-->
</div>
<!--end dm-->

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/socket.io/1.3.7/socket.io.min.js"></script>
<script src="static/client-screen.js"></script>
<script type="text/javascript">
    $(function () {
        $(".s_sub").click(function () {
            CHAT.submit();
            var text = $(".s_txt").val();
            var div = "<div>" + text + "</div>";
            init_screen();
        })
    });
    function addToScreen(data) {
        var img = '<img src="' + data.headimgurl + '" class="logo"/>';
        var message = "<span class='content'>" + data.username + '说:' + data.content + '"</span>';
        var div = "<div class='message'>" + img + message + "</div>";
        $(".d_show").append(div);
        init_screen();
    }
    function init_screen() {
        var _top = 0;
        $(".d_show").find(".message").show().each(function () {
            var _left = $(window).width() - $(this).width();
            var _height = $(window).height();

            _top = _top + 76;
            if (_top >= _height - 100) {
                _top = 0;
            }
            var _width = $(this).find('.content').width();
            console.log(this);
            $(this).css(
                    {
                        left: _left,
                        top: _top,
                        width:_width+100
                    })
                    .find('.content').css({color: getReandomColor()});
            var time = 10000;
            if ($(this).index() % 2 == 0) {
                time = 15000;
            }
            $(this).animate({left: "-" + _left + "px"}, time, function () {
            });
        });
    }

    function getReandomColor() {
        return '#' + (function (h) {
                    return new Array(7 - h.length).join("0") + h
                })((Math.random() * 0x1000000 << 0).toString(16))
    }
    init_screen();
</script>
</body>
</html>